<template>
  <div class="from">
    <div class="fromtitle">
      <van-nav-bar title="订单列表" fixed></van-nav-bar>
    </div>
    <van-empty description="你目前还没有登录喔，快去登录吧" v-if="flag">
      <van-button round type="danger" class="bottom-button" @click="goLOgin"
        >去登录</van-button
      >
    </van-empty>
    <div class="from-body" v-else>
      <van-tabs animated sticky offset-top="50">
        <van-tab v-for="(value, index) in typedata" :key="index">
          <template #title>
            <div class="typeDesc" @click="cli(value)">
              <div>{{ value.title }}</div>
            </div>
          </template>
          <van-empty
            description="你目前还没有下单喔，快去下单吧"
            v-if="orderDatas.length === 0"
          >
            <van-button
              round
              type="danger"
              class="bottom-button"
              @click="goshouye"
              >去首页</van-button
            >
          </van-empty>
          <div
            v-else
            class="tab-item"
            v-for="(item, index) in orderDatas"
            :key="index"
          >
            <div class="clearfix tab-item-box">
              <div class="fl no">{{ index }}</div>
              <div class="fr">
                <div class="text" v-if="item.status === 1" @click="sure(index)">
                  确认收货
                </div>
                <div class="text-box-tab" v-else>
                  <div class="finished">已完成</div>
                  <div class="remove" @click="remove(index)">×</div>
                </div>
              </div>
            </div>
            <div class="order-box" @click="goparticulars(item)">
              <div>
                <div
                  class="clearfix cell-box"
                  v-for="(v, index) in item.products"
                  :key="index"
                >
                  <div class="fl pro-img">
                    <img class="aotu-img" :src="v.smallImg" />
                  </div>
                  <div class="fl pro-info">
                    <div class="text-box">
                      <div class="clearfix">
                        <div class="fl text-name">{{ v.name }}</div>
                        <div class="fl text-rule">{{ v.rule }}</div>
                      </div>
                      <div class="text-enname">{{ v.enname }}</div>
                    </div>
                    <div class="price-box">
                      <div class="clearfix">
                        <div class="fl text-price">
                          <div class="price">￥{{ v.price }}</div>
                        </div>
                        <div class="fr text-num">
                          <div class="num">×{{ v.count }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pro-box">
                  <div class="pro-boxing">
                    <div class="date">
                      {{ item.date | formatDate('yyyy-MM-dd hh:mm:ss') }}
                    </div>
                    <div class="clearfix">
                      <div class="fl pro-count">共计{{ item.count }}件商品</div>
                      <div class="fr pro-total">合计{{ item.total }}</div>
                    </div>
                  </div>
                  <div class="left-box left"></div>
                  <div class="left-box right"></div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import '../../assets/less/from.less'
import { Dialog } from 'vant'
import { findOrderAPI, affirmorderAPI } from '@/api/user'
import { getToken } from '@/utils/storage'
export default {
  data () {
    return {
      status: false,
      sidarrs: [],
      statusnum: 0,
      typedata: [
        { title: '全部', status: 0 },
        { title: '进行中', status: 1 },
        { title: '已完成', status: 2 }
      ],
      // 商品详情
      orderDatas: [],
      flag: false
    }
  },
  created () {
    this.acquirefrom(this.statusnum)
  },
  methods: {
    // 去登录
    goLOgin () {
      this.$router.push({ path: '/Login' })
    },
    // 切换状态栏
    cli (value) {
      this.statusnum = value.status
      this.acquirefrom(this.statusnum)
    },
    // 获取订单数据
    async acquirefrom (status) {
      const tokenString = getToken()
      if (!tokenString) return (this.flag = true)
      const res = await findOrderAPI({
        appkey: this.$store.state.appkey,
        tokenString,
        status
      })
      if (res.code === 70000) {
        // 如果订单列表为空则返回空数组
        if (res.result.length === 0) return (this.orderDatas = [])
        // 翻转数组,让先下单的产品在下面
        res.result.reverse()
        // 将数组里的进行中 ===1放上面
        res.result = res.result.sort((a, b) => {
          return a.status - b.status
        })
        // 由于订单是一个产品一个分类.需要拿oid进行分类
        // 假如一个订单里面有多个不同的商品，会返回多个一样的oid，需要对这些oid进行处理
        // 新建一个对象，如果对象里面没有对应的oid则添加时间，数量
        const orderData = {}
        res.result.forEach(item => {
          if (!orderData[item.oid]) {
            orderData[item.oid] = {
              date: item.createdAt,
              count: item.count,
              total: item.price * item.count,
              products: [item],
              status: item.status,
              oid: item.oid
            }
          } else {
            orderData[item.oid].count += item.count
            orderData[item.oid].total += item.price * item.count
            orderData[item.oid].products.push(item)
          }
        })
        this.orderDatas = orderData
        console.log('this.orderDatas', this.orderDatas)
      }
    },
    sure (oid) {
      // 确定收货提示
      const url = '/receive'
      Dialog.confirm({
        title: '确定收货',
        message: '确定将已收到商品'
      }).then(() => {
        this.affirmorder(oid, url) // 调用确认收货接口
      })
    },
    // 删除订单提示
    remove (oid) {
      const url = '/removeOrder'
      Dialog.confirm({
        title: '确定删除订单',
        message: '此操作不可返回'
      }).then(() => {
        this.affirmorder(oid, url) // 调用删除订单接口
      })
    },
    // 确定收货/删除订单方法
    affirmorder (oid, url) {
      const tokenString = getToken()
      if (!tokenString) return
      affirmorderAPI(url, {
        appkey: this.$store.state.appkey,
        tokenString,
        oid
      }).then(res => {
        this.acquirefrom(this.statusnum) // 重新渲染
      })
    },
    goshouye () {
      this.$router.push({ name: 'Shouye' })
    },
    // 查看详情
    goparticulars (item) {
      this.$router.push({ name: 'orderdetails', query: { item } })
    }
  }
}
</script>

<style lang="less" scoped></style>
